<head>
    <script src="../build/index.js"></script>
    <script src="../build/component.scroll.js"></script>
</head>

<body>
    <canvas id="app" width="800" height="1600"></canvas>

    <script>
        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            fullScreen: true,
        });
        $app.start();

        // var $ScrollBox = $app.add({
        //     style: {
        //         left: 0,
        //         top: 0,
        //         width: $app.width,
        //         height: $app.height,
        //         locate: 'lt',
        //     },
        //     scroll: {
        //         scrollable: true,
        //         minScrollX: 0,
        //         maxScrollX: 0,
        //         minScrollY: 0,
        //         maxScrollY: $app.height,
        //     },
        //     events: {
        //         // interceptor: function ($e) {
        //         //     if ($e.type === 'touchmove' || $e.type === 'hold') {
        //         //         $e.$stopPropagation = true;
        //         //         return $e;
        //         //     }
        //         // }
        //     },
        // });
        var $ScrollBox = $app.add(new Easycanvas.class.scroll({
            name: 'ScrollBox',
            style: {
                left: 0,
                top: 0,
                width: $app.width,
                height: $app.height,
                locate: 'lt',
            },
            scroll: {
                scrollable: true,
                minScrollX: 0,
                maxScrollX: 0,
                minScrollY: 0,
                maxScrollY: $app.height,
            },
        }));

        var imgSrc = 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/G.png';

        for (var i = 0; i < 10; i++) {
            $ScrollBox.add({
                content: {
                    img: imgSrc
                },
                style: {
                    left: $app.width / 2, top: 100 + i * 300,
                    width: 100 + i * 10, height: 100 + i * 10,
                },
                events: {
                    click: function () {
                        this.style.opacity = this.style.opacity === 1 ? 0.5 : 1;
                    },
                    touchmove: function () {
                        console.log(1);
                        return true;
                    }
                }
            });
        }
    </script>
</body>

